<template>
  <div>
	  <div style="margin:2% 0;display: inline-block;">
	    <span>等级分类：</span>
	    <el-select v-model="type" placeholder="请选择类型" style="width:150px;" @change="selectTrigger(type)">
	      <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value">
	      </el-option>
	    </el-select>
	  </div>
	  <el-table
	    v-loading="tableDataLoading"
	    :data="configData">
	    <el-table-column
	      prop="id"
	      label="编号"
	      width="80">
	    </el-table-column>
	    <el-table-column
	      prop="content"
	      label="配置名称">
	    </el-table-column>
	    <el-table-column
	      prop="value"
	      label="对应值">
			<template slot-scope="scope">
				<span>{{scope.row.value}}{{scope.row.unit}}</span>
			</template>
	    </el-table-column>
	    <el-table-column
	      prop="type"
	      label="分类"
	      width="150">
	      <template slot-scope="scope">
			<span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.type == 1">v1团长</span>
	        <span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.type == 2">v2团长</span>
	        <span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.type == 3">v3团长</span>
			<span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.type == 4">v4团长</span>
			<span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.type == 5">v5团长</span>
			<span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.type == 6">v6团长</span>
			<span style="color: #4f9dec;cursor: pointer;" v-if="scope.row.type == 7">v7团长</span>
		  </template>
	    </el-table-column>
	    <el-table-column
	        label="操作"
	        width="100">
	        <template slot-scope="scope">
	          <el-button
	            size="mini"
	            type="primary"
	           :disabled="!isAuth('memberList:update')"
	            @click="amendone(scope.$index, scope.row)">编辑
	          </el-button>
	        </template>
	      </el-table-column>
	  </el-table>
	  <div style="text-align: center;margin-top: 10px;">
	    <el-pagination
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :page-sizes="[5, 10, 15, 20]"
	      :page-size="size"
	      :current-page="page"
	      layout="total,sizes, prev, pager, next"
	      :total="totalnum2">
	    </el-pagination>
	  </div>
	  <!-- 修改配置弹框 -->
	  <el-dialog title="编辑配置" :visible.sync="dialogFormVisible1" center>
	  	<el-form :model="form">
	  	  <el-form-item label="配置名称：" :label-width="formLabelWidth" >
	  		<el-input v-model="form.content" style="width:65%;" disabled></el-input>
	  	  </el-form-item>
	  	  <el-form-item label="对应值：" :label-width="formLabelWidth" >
	  		<el-input v-model="form.value" style="width:65%;"></el-input>
	  	  </el-form-item>
	  	</el-form>
	    <div slot="footer" class="dialog-footer">
	  	<el-button @click="dialogFormVisible1 = false">取 消</el-button>
	  	<el-button type="primary" @click="amendoneNoticeTo()">确 定</el-button>
	    </div>
	  </el-dialog>
  </div>
</template>

<script>

export default {
    data () {
      return {
        size: 5,
        page: 1,
        state:-1,
        type:-1,
        totalnum:0,
        totalnum2:0,
        ids:'',
        content :'',
        activeName: 'first',
        tableDataLoading: false,
        dialogFormVisible:false,
        dialogFormVisible1:false,
        dialogFormVisible2:false,
        dialogFormVisible3:false,
        formLabelWidth:'200px',
        checkBoxData: [],//多选框选择的值
        tableData: [],
        configData:[],
        form:{
          id:'',
          type:'',
          value:'',
          unit:'',
          content:'',
		  classify:''
        },
        form2:{
          picture:'',
        },
        statenum: [
          {
            value: -1,
            label: '全部'
          }, {
            value: 0,
            label: '待审核'
          }, {
            value: 1,
            label: '同意'
          }, {
            value: 2,
            label: '拒绝'
          }],
          types: [
            {
              value: -1,
              label: '全部'
            }, {
              value: 1,
              label: 'v1团长'
            }, {
              value: 2,
              label: 'v2团长'
            }, {
              value: 3,
              label: 'v3团长'
            },
			{
				value: 4,
				label: 'v4团长'
			},
			{
				value: 5,
				label: 'v5团长'
			},
			{
				value: 6,
				label: 'v6团长'
			},
			{
				value: 7,
				label: 'v7团长'
			}
		],
      }
    },
    methods: {
      handleSizeChange (val) {
        this.size = val
        this.dataSelect()
      },
      handleCurrentChange (val) {
        this.page = val
        this.dataSelect()
      },
      // 图片预览
      lookMember(rows){
        this.dialogFormVisible2 = true
        this.form2.picture = rows.picture
      },
      selectTrigger(){
        this.page = 1
        this.size = 5
        this.dataSelect()
      },
      // 修改配置弹框
      amendone(index,rows){
      	this.dialogFormVisible1=true
      	this.form.id = rows.id
      	this.form.type = rows.type
      	this.form.content = rows.content
      	this.form.value=rows.value
        this.form.unit = rows.unit
		this.form.classify = rows.classify
      },
      // 修改配置
      amendoneNoticeTo(){
      	this.$http({
      	  url: this.$http.adornUrl2('/member/updateMemberConfig'),
      	  method: 'post',
      	  data: this.$http.adornData({
            'id':this.form.id,
      	    'type': this.form.type,
            'value': this.form.value,
            'content':this.form.content,
            'unit':this.form.unit,
			'classify':this.form.classify
      	  })
      	}).then(({data}) => {
      	  if (data && data.status === 0) {
      		this.dialogFormVisible1 = false
      	    this.$message({
      	      message: '操作成功',
      	      type: 'success',
      	      duration: 1500,
      	      onClose: () => {
      	        this.dataSelect()
      	      }
      	    })
      	  } else {
      	    this.$message.error(data.msg)
      	  }
      	})
      },
      // 获取数据列表
      dataSelect () {
         this.tableDataLoading = true
        let page = this.page-1
        this.$http({
          url: this.$http.adornUrl2('/member/selectMemberConfig'),
          method: 'get',
          params: this.$http.adornParams({
            'page': page,
            'size': this.size,
            'type': this.type,
          })
        }).then(({data}) => {
          this.tableDataLoading = false
          let returnData = data.data
          this.configData = returnData.content
          this.totalnum2 = returnData.totalElements
        })
      },
    },
    mounted () {
      this.dataSelect()
    }
  }
</script>

<style>
</style>
